
import React, { Component, PropTypes } from 'react';
import { StyleSheet, View, Text, Image, ScrollView, Dimensions, TouchableHighlight } from 'react-native';
import QRNCode from 'react-native-qrcode';
import ColorBorderView from '../commonComponent/colorBorderView';

const _windows = Dimensions.get('window');
const _width = _windows.width;

class ModalQRcode extends Component {
    static propTypes = {
        title: PropTypes.string,
        number: PropTypes.string,
        linkUrl: PropTypes.string,
        closeAction: PropTypes.function,
    }
//  'absolute', 'relative'
    render() {
        return (
            <View style={styles.modalContainer}>
                <View style={styles.container}>
                    <View style={styles.headContainer}>
                        <TouchableHighlight underlayColor='#FFFFFF' onPress={this.props.closeAction}>
                            <Image style={styles.closeImg} source={{uri:'camera_close'}} />
                        </TouchableHighlight>
                        <Text style={styles.title}>{this.props.title}</Text>
                    </View>
                    <QRNCode
                        value={this.props.linkUrl}
                        size={240}
                    />
                    <Image position='absolute' style={styles.centerImg} source={{uri:'more_icon_qq'}} />
                    <Text style={styles.number} >{this.props.number}</Text>
                    <Text style={styles.message} >扫描二维码查看护照信息</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: 40,
        paddingBottom: 40,
        paddingLeft: 30,
        paddingRight: 30,
        backgroundColor:'rgba(0, 0, 0, 0.5)'
    },
    container: {
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    headContainer: {
        flexDirection: 'row',
        marginBottom:80,
    },
    title: {
        flex:1,
        fontSize: 16,
        alignSelf:'center',
        textAlign: 'center',
        color: '#4A4A4A',
        marginTop:20,
        marginRight:50,
    },
    number: {
        fontSize: 14,
        textAlign: 'center',
        color: '#9b9b9b',
        marginTop:10,
    },
    message: {
        fontSize: 16,
        textAlign: 'center',
        color: '#4A4A4A',
        marginTop:80,
        marginBottom:20,
    },
    centerImg: {
        backgroundColor:'#FFFFFF',
        borderRadius:4,
        borderColor:'#CCCCCC',
        borderWidth:1,
        left:(_width/2.0-50),
        top:216,
        width:40,
        height:40,
    },
    closeImg: {
        marginTop:10,
        marginLeft:10,
        width:30,
        height:30,
    },
    closePosition: {
        left:20,
        top:10,
    },
});

export default ModalQRcode;